<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Conquer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href='#css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
<!--        <div class="navbar-header">-->
<!--            <button type="button" class="navbar-toggle">-->
<!--                <span class="icon-bar"></span>-->
<!--                <span class="icon-bar"></span>-->
<!--                <span class="icon-bar"></span>-->
<!--            </button>-->
<!--        </div>-->
        <div class="single-page-nav sticky-wrapper" id="tmNavbar">
            <ul class="nav navbar-nav">
                <li><a href="#section1">Homepage</a></li>
                <li><a href="#section2">知名景点</a></li>
                <li><a href="#section3">跟团游</a></li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-3 text-center" style="color:whitesmoke" align="right">用户登录</div>
        <div class="col-md-3 text-center" style="color:whitesmoke" align="right">管理员登录</div>
        <div class="col-md-3 text-center" style="color:whitesmoke" align="right">旅行社登录</div>
        <div class="col-md-3 text-center" style="color:whitesmoke" align="right">景点商家登录</div>


    </div>
</nav>

<div id="section1">
    <header id="header-area" class="intro-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <div class="header-content">
                        <h1>Travel</h1>
                        <h4>旅游，不仅仅是看见，更是感同身受。走过万里路，才能读懂万卷书。</h4>
                    </div>
                </div>
            </div>
        </div>
    </header>
</div>
<div id="section2">
    <!-- Start Feature Area -->
    <section id="feature-area" class="about-section">
        <div class="container">
            <div class="row text-center inner">
                <div class="col-sm-4" >
                    <div class="feature-content">
                        <img src="img/1-1.jpg" alt="Image">
                        <h2 class="feature-content-title green-text">Bootstrap v3.3.6</h2>
                        <p class="feature-content-description">Morbi sagittis justo a velit placerat ullamcorper quis
                            quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque
                            semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.
                        </p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="feature-content">
                        <img src="img/1-2.jpg" alt="Image">
                        <h2 class="feature-content-title blue-text">Responsive Design</h2>
                        <p class="feature-content-description">Conquer Template is provided by templatemo for free of
                            charge. You can use this template for any kind of website. No credit link is required. All
                            images by <a href="http://unsplash.com" target="_parent">Unsplash</a>. Thank you for
                            visiting our website. Please come again!</p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="feature-content">
                        <img src="img/1-3.jpg" alt="Image">
                        <h2 class="feature-content-title red-text">Parallax Layout</h2>
                        <p class="feature-content-description">Morbi sagittis justo a velit placerat ullamcorper quis
                            quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque
                            semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.
                        </p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row text-center inner">
                <div class="col-sm-4" onclick="tiaozhuan()">
                    <div class="feature-content">
                        <img src="img/1-1.jpg" alt="Image">
                        <h2 class="feature-content-title green-text">Bootstrap v3.3.6</h2>
                        <p class="feature-content-description">Morbi sagittis justo a velit placerat ullamcorper quis
                            quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque
                            semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.
                        </p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="feature-content">
                        <img src="img/1-2.jpg" alt="Image">
                        <h2 class="feature-content-title blue-text">Responsive Design</h2>
                        <p class="feature-content-description">Conquer Template is provided by templatemo for free of
                            charge. You can use this template for any kind of website. No credit link is required. All
                            images by <a href="http://unsplash.com" target="_parent">Unsplash</a>. Thank you for
                            visiting our website. Please come again!</p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="feature-content">
                        <img src="img/1-3.jpg" alt="Image">
                        <h2 class="feature-content-title red-text">Parallax Layout</h2>
                        <p class="feature-content-description">Morbi sagittis justo a velit placerat ullamcorper quis
                            quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque
                            semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.
                        </p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row text-center inner">
                <div class="col-lg-8"></div>
                <div class="col-lg-4"  >
                    <a class="text-right" th:href="@{/user/main}" >>>查看更多</a>
                </div>
            </div>
        </div>

    </section>
    <!-- End Feature Area -->

</div>
<div id="section3">
    <!-- Start Services Area -->
    <section id="services-area" class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center inner our-service">
                    <div class="service">
                        <h1>跟团游</h1>
                        <p>让世界成为您的画布，让旅行成为您的创作。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Services Area -->

    <!-- Start Testimornial Area -->
    <section id="testimornial-area">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="testimonial-content">
                        <img src="img/4-1.jpg" alt="Image">
                        <h2>Column One</h2>
                        <p>Ut ac odio scelerisque ante ornare commodo. Sed faucibus dui libero, in tincidunt purus
                            pretium quis. Fusce posuere egestas enim eu viverra.</p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                        <br>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="testimonial-content">
                        <img src="img/4-2.jpg" alt="Image">
                        <h2>Column Two</h2>
                        <p>Ut ac odio scelerisque ante ornare commodo. Sed faucibus dui libero, in tincidunt purus
                            pretium quis.</p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                        <br>
                        <p id="redd"></p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="testimonial-content">
                        <img src="img/4-3.jpg" alt="Image">
                        <h2>Column Three</h2>
                        <p>Ut ac odio scelerisque ante ornare commodo. Sed faucibus dui libero, in tincidunt purus
                            pretium quis. Fusce posuere egestas enim eu viverra.</p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                        <br>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="testimonial-content">
                        <img src="img/4-4.jpg" alt="Image">
                        <h2>Column Four</h2>
                        <p>Ut ac odio scelerisque ante ornare commodo. Sed faucibus dui libero, in tincidunt purus
                            pretium quis.</p>
                        <a href="#" class="feature-content-link blue-btn">See Details</a>
                        <br>
                        <p id="dets"></p>
                    </div>
                </div>
            </div>

        </div>
        <div class="container">
            <div class="row text-center inner">
                <div class="col-lg-8"></div>
                <div class="col-lg-4"  >
                    <a class="text-right" th:href="@{/user/main}" >>>查看更多</a>
                </div>
            </div>
        </div>
    </section>

    <!-- End Testimornial Area -->
</div>

<!-- Start Footer Area -->
<footer id="footer-area">
    <hr>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <p class="copy">Welcome to Xinjiang

                    | XinJiang university 软件学院21-21班
            </div>
        </div>
    </div>
</footer>
<!-- End Footer Area -->

<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script> <!-- https://github.com/markgoodyear/scrollup -->
<script src="js/jquery.singlePageNav.min.js"></script> <!-- https://github.com/ChrisWojcik/single-page-nav -->
<script src="js/parallax.js-1.3.1/parallax.js"></script> <!-- http://pixelcog.github.io/parallax.js/ -->
<script>

    // HTML document is loaded. DOM is ready.
    $(function () {

        // Parallax
        $('.intro-section').parallax({
            imageSrc: 'img/bg-1.jpg',
            speed: 0.2
        });
        $('.services-section').parallax({
            imageSrc: 'img/bg-2.jpg',
            speed: 0.2
        });
        $('.contact-section').parallax({
            imageSrc: 'img/bg-3.jpg',
            speed: 0.2
        });

        // jQuery Scroll Up / Back To Top Image
        $.scrollUp({
            scrollName: 'scrollUp',      // Element ID
            scrollDistance: 300,         // Distance from top/bottom before showing element (px)
            scrollFrom: 'top',           // 'top' or 'bottom'
            scrollSpeed: 1000,            // Speed back to top (ms)
            easingType: 'linear',        // Scroll to top easing (see http://easings.net/)
            animation: 'fade',           // Fade, slide, none
            animationSpeed: 300,         // Animation speed (ms)
            scrollText: '', // Text for element, can contain HTML
            scrollImg: true            // Set true to use image
        });

        // ScrollUp Placement
        $(window).on('scroll', function () {

            // If the height of the document less the height of the document is the same as the
            // distance the window has scrolled from the top...
            if ($(document).height() - $(window).height() === $(window).scrollTop()) {

                // Adjust the scrollUp image so that it's a few pixels above the footer
                $('#scrollUp').css('bottom', '80px');

            } else {
                // Otherwise, leave set it to its default value.
                $('#scrollUp').css('bottom', '30px');
            }
        });

        $('.single-page-nav').singlePageNav({
            offset: $('.single-page-nav').outerHeight(),
            speed: 1500,
            filter: ':not(.external)',
            updateHash: true
        });

        $('.navbar-toggle').click(function () {
            $('.single-page-nav').toggleClass('show');
        });

        $('.single-page-nav a').click(function () {
            $('.single-page-nav').removeClass('show');
        });

    });

    function tiaozhuan() {

        alert("aaaa")
    }
</script>
</body>
</html>